import React, { Component } from 'react'
import axios from 'axios'
export default class App extends Component {
    constructor() {
        super()
        this.state = {
            filmsList: [],
            info: ''
        }
        axios.get('/test.json').then(response => {
            this.setState({ filmsList: response.data.data.films })
            console.log(response.data.data.films)
        })
    }
    render() {
        return (
            <div>
                {
                    this.state.filmsList.map((item) => <FilmItem key={item.filmId} {...item}
                        onEvent={(value) => {
                            this.setState({ info: value })
                        }}
                    ></FilmItem>)
                }
                <FileDetail info={this.state.info}></FileDetail>
            </div>
        )
    }
}

class FilmItem extends Component {
    render() {
        console.log(this.props)
        const { name, poster, grade, synopsis } = this.props
        return (
            <div className="filmItem" onClick={() => { this.props.onEvent(synopsis) }}>
                <img src={poster} alt={name} />
                <h4>{name}</h4>
                <div>评分{grade}</div>
            </div>
        )
    }
}

class FileDetail extends Component {
    render() {
        const { info } = this.props
        return (
            <div className="filmDetail">
                <div>评分{info}</div>
            </div>
        )
    }
}


